<template>
    <div>
      <input placeholder="输入关键字搜索" @keyup.enter="searchMsg">
      <table class="my-table">
        <thead>
          <tr>
            <th>就诊日期</th>
            <th>医生姓名</th>
            <th>诊断结果</th>
            <th>处方信息</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in records" :key="index">
            <td>{{item.date}}</td>
            <td>{{item.doctor}}</td>
            <td>{{item.diagnosis}}</td>
            <td>{{item.prescription}}</td>
            <td @click="detail(index)">详情</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  <script>

  // 接收App.vue传过来的数据 props
  export default{
    props:{
      records:Array,
      isShow:Boolean
    },
    methods:{
      // 点击详情的时候MyMask显示 子传父 this.$emit
      detail(index){
        // console.log(!this.isShow);
        // console.log(this.records[index]);
        // this.records[index] 是我点击的那一项
        this.$emit('showList',this.records[index])
        this.$emit('changeMask',!this.isShow)
      },
      searchMsg(event){
        // console.log(event.currentTarget.value);
      //  console.log(this.records.filter(item=>item.doctor==event.currentTarget.value));
       this.$emit('search',this.records.filter(item=>item.doctor==event.currentTarget.value))
      }
    }
  }
</script>
  <style scoped>
    .my-table {
      border-collapse: collapse;
      width: 100%;
    }
  
    .my-table td, .my-table th {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
  
    .my-table th {
      background-color: #f2f2f2;
    }
  </style>